<template>
  <div class="info-tab-root">
    <el-scrollbar>
      <div class="table-row" v-for="(item, index) in tableConfig" :key="index">
        <div class="label">
          <i :class="['icon',item.icon]"></i>
          {{ item.label }}
        </div>
        <div class="value">
          <span v-if="item.type == null || item.type == ''">
                    {{ data[item.value] }}{{item.suffix}}
          </span>
          <show-file-list :show-close="false" v-if="item.type == 'file'" :file-list="data[item.value]"></show-file-list>
          <div class="tag-con" v-if="item.type == 'tag' && isArr(data[item.value])">
            <el-tag
                class="diy-tag"
                v-for="(tag,index) in data[item.value]"
                :key="index"
                :type="getTagType(tag,item.tagConfig)">
              {{ item.tagConfig.prop.label != '' ? tag[item.tagConfig.prop.label] : tag }}
            </el-tag>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import showFileList from "@/components/ShowFileList/index.vue";
import {isArr} from "@/utils/arrayUtil";

export default {
  methods: {
    isArr,
    getTagType(dataItem, config) {
      let {prop: {label, value}, escapeConfig} = config
      let cItem = escapeConfig.find(item => item.value == dataItem[value])
      return cItem ? cItem.type : ''
    }
  },
  components: {
    showFileList
  },
  props: {
    tableConfig: {
      type: Array,
      default: () => []
    },
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
}
</script>

<style lang="scss" scoped>
@import "@/assets/style/businessTheme.scss";

.info-tab-root {
  height: calc(100% - 2px);
  width: calc(100% - 2px);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(220, 223, 230, 1);
  overflow: hidden;

  .table-row {
    border-bottom: 1px solid rgba(220, 223, 230, 1);
    width: calc(100% - 2px);
    display: flex;
    box-sizing: border-box;
    overflow: hidden;

    &:last-child {
      border-bottom: none;
    }

    .label, .value {
      display: flex;
      align-items: flex-start;
      box-sizing: border-box;
      padding: 14px 20px;
      font-size: $thirdly-font-size;
      line-height: $thirdly-line-height;
      font-weight: 500;
    }

    .label {
      width: 200px;
      justify-content: flex-start;
      color: rgba(96, 98, 102, 1);
      background: #F7F8FA;
      border-right: 1px solid rgba(220, 223, 230, 1);

      .icon {
        position: relative;
        top: 3px;
        margin-right: 8px;
      }
    }

    .value {
      width: calc(100% - 200px);
      justify-content: flex-start;
      word-break: break-all;
      color: rgba(48, 49, 51, 1);
      letter-spacing: 0;

      ::v-deep .file-list {
        margin-top: 0;
      }
    }
  }
}
</style>
